<style>
  .list-block .item-content,.card-footer {padding-left: 2rem;}
  .button-bottom {
    /*padding: .5rem 1rem;*/
    /*width: 100%;*/
    /*background: #fff;*/
    /*border-top: 1px solid #e1e1e1;*/
    /*height: auto;*/
    /*height: 3.15rem;*/
    /*padding: 0 1rem;*/
    margin-left: 0;
    /*background: #ccc;*/
    /*color: #444;*/
    border-top: none;
  }
  .button-bottom .choose-button,.button-bottom .submit-button,.button-bottom .cancel-button {
    background: #4cd964 ;
    height: 100%;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
  }
  .button-bottom .cancel-button {
    background: #c30;
  }
  /*.hidden-button {display: none;}*/


  .order .o-counts {
    font-size: .6rem;
    color: #fff;
    background: #0894ec;
    flex-basis: 1.25rem;
    display: inline-block;
    height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
  }
  .order .o-title {
    flex-basis: 80vw;
    padding: 0 .3rem;
  }
  .order .o-price {
    color: #c30;
  }
  .state {
    width: 20%;
    float: left;

  }
  .state .s-name {
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    border: .2vw solid #ccc;
    color: #ccc;
    border-radius: 50%;
    font-size: .5rem;
    margin: 0 4.5vw;
    position: relative;
  }
  .state .s-name:before {
    content: '';
    position: absolute;
    width: 9vw;
    height: .2vw;
    top:5vw;
    left:-9vw;
    background: #ccc;
  }
  .state .s-name.success {
    border: .2vw solid #3c3;
    color: #3c3;
  }
  .state .s-name.success:before {
    background: #3c3;
  }
  .state:first-child .s-name:before {
    height: 0;
    width: 0;
  }
  .state .s-time {
    font-size: .4rem;
    text-align: center;
    color: #888;
  }
  .order .card-detail {
    background: #eee;
    display: none;

  }
  .card-footer .amount[type="number"] {
    width: 60px;
    height: auto;
    text-align: center;
    background: #fafafa;
    font-size: .7rem;
    padding: 0;
  }
  .plus,.minus {
    width: 24px;
    line-height: 22px;
    height: 24px;
    text-align: center;
    background: #e7e7e7;
    /*border-radius: 2px;*/
  }
  .p-check {
    width: 2rem;
    height: 100%;
    position: absolute;
    padding: 0 .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .p-check-button {
    /*display: inline-block;*/
    width: 1rem;
    height:1rem;
    border: 1px solid #0894ec;
    border-radius: 50%;
  }
  .p-check-button.ok {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-check-button.ok:before{
    content: "";
    width: .5rem;
    height: .5rem;
    background: #0894ec;
    border-radius: 50%;
  }
  .close-popup {
    position: fixed;
  }

  /* info */

</style>
<div class="page">
  <!--<header class="bar bar-nav">-->
  <!--&lt;!&ndash;<a class="icon icon-menu pull-left open-panel"></a>&ndash;&gt;-->
  <!--<h1 class="title">我的</h1>-->
  <!--</header>-->
  <div class="buttons-tab">
    <a href="#tab1" class="tab-link active button">购物车</a>
    <a href="#tab2" class="tab-link button">订单</a>
    <a href="#tab3" class="tab-link button">个人资料</a>
  </div>
  <div class="content" style="margin-top: 40px;">

    <div class="content-block" style="height: 100%;position: relative;overflow: hidden;">
      <div class="tabs" style="height: 100%;">
        <div id="tab1" class="tab active" style="height:100%;">

            <div class="list-container list-block" style="margin:0;height: 100%;overflow: auto;">
              <!--<div class="list-block">-->
              <ul style="border: none;height: 1000px;margin-top: 10px;">

                <li class="swipeout" style="border-bottom: 1px solid #e7e7e7;">
                  <!-- Usual list element wrapped with "swipeout-content" -->
                  <div class="swipeout-content">
                    <!-- Your list element here -->
                    <div class="card product" style="margin: 0;height: 100px;">
                      <label class="p-check label-checkbox">
                        <input type="checkbox" name="cart-check">
                        <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                      </label>
                      <div class="card-content">
                        <div class="list-block media-list">

                          <div class="item-content">

                            <div class="item-media">
                              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                            </div>
                            <div class="item-inner elip" style="border: none;">
                              <div class="item-title-row">
                                <div class="item-title elip">A2 Platinum Infant Formula Stage 1</div>
                              </div>
                              <div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div>
                            </div>
                          </div>

                        </div>
                      </div>
                      <div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">
                        <span>规格：900G</span>
                        <span style="color:#CC3300;">￥666</span>
                        <span class="count" style="display: flex;padding: 20px;margin: -20px;">
                          <i style="line-height: 12px;border-radius: 2px 0 0 2px;color: #bbb;" class="minus">_</i>
                          <input class="amount" type="number" pattern="[0-9]*" value="1" />
                          <i style="border-radius: 0 2px 2px 0;" class="plus">+</i>
                        </span>
                      </div>
                    </div>
                  </div>

                  <!-- Swipeout actions right -->
                  <div class="swipeout-actions-right">
                    <!-- Swipeout actions links/buttons -->
                    <a href="#" style="background: #CC3300;">删除</a>
                    <!--<a class="swipeout-close" href="#">Action 2</a>-->
                  </div>
                </li>
                <li class="swipeout" style="border-bottom: none;">
                  <!-- Usual list element wrapped with "swipeout-content" -->
                  <div class="swipeout-content">
                    <!-- Your list element here -->
                    <div class="card product" style="margin: 0;">
                      <div class="card-content">
                        <div class="list-block media-list">

                          <div class="item-content">
                            <div class="item-media">
                              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                            </div>
                            <div class="item-inner elip" style="border: none;">
                              <div class="item-title-row">
                                <div class="item-title elip">A2 Platinum Infant Formula Stage 1</div>
                              </div>
                              <div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div>
                            </div>
                          </div>

                        </div>
                      </div>
                      <div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">
                        <span>900G</span>
                        <span style="color:#CC3300;">￥666</span>
                      </div>
                    </div>
                  </div>

                  <!-- Swipeout actions right -->
                  <div class="swipeout-actions-right">
                    <!-- Swipeout actions links/buttons -->
                    <a href="#" style="background: #CC3300;">移除</a>
                    <!--<a class="swipeout-close" href="#">Action 2</a>-->
                  </div>
                </li>
                </li>




              </ul>
              <!--</div>-->
            </div>



          <div class="button-bottom bar bar-tab">
            <!--<div class="choose-button">选择商品</div>-->
            <div class="row no-gutter">
              <div class="col-60" style="line-height: 2.5rem;text-align: center;">总计￥666</div>
              <div class="col-40 submit-button open-about">提交订单</div>
              <!--<div class="col-25 cancel-button">取消</div>-->
            </div>
          </div>



        </div>

<!--------------------------------------------------------------------------------------------------------------------------------->
        <!--订单-->
        <div id="tab2" class="tab">
          <div class="content-block">
            <p class="buttons-row">
              <a href="#" class="button active">Button 1</a>
              <a href="#" class="button">Button 2</a>
              <a href="#" class="button">Button 3</a>
            </p>

            <div class="card order" style="margin: 0;">
              <div class="card-content">
                <div class="list-block media-list">

                  <div class="item-content" style="padding-left: 3vw;">

                    <div class="item-inner elip" style="border: none;padding-right: 3vw;">
                      <div class="item-title-row">
                        <div class="item-title elip" style="width: 100%;display:flex;justify-content: space-between;margin-bottom: .5rem;">
                          <div class="o-counts">5</div>
                          <div class="o-title elip">白金系列1段婴儿配方奶粉</div>
                          <div class="o-price">￥6666</div>
                        </div>
                      </div>
                      <div class="item-subtitle">
                        <div class="state">
                          <div class="s-name success">下单</div>
                          <div class="s-time">2011.11.11</div>
                        </div>
                        <div class="state">
                          <div class="s-name success">处理</div>
                          <div class="s-time">2011.11.22</div>
                        </div>
                        <div class="state">
                          <div class="s-name">付款</div>
                        </div>
                        <div class="state">
                          <div class="s-name">发货</div>
                        </div>
                        <div class="state">
                          <div class="s-name">完成</div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="card-detail">
                <div>订单号</div>
                <div>商品详情</div>
              </div>
            </div>





          </div>
        </div>

        <!--------------------------------------------------------------------------------------------------------------------->
       <!--收件人-->
        <div id="tab3" class="tab">
          <div class="content">
            <div class="content-block">
              <div class="content-block-title">
                收件信息
              </div>

              <div class="list-block media-list">
                <ul>
                  <li>
                    <a href="#" class="item-link item-content">
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">张三</div>
                          <div class="item-after">15106205583</div>
                        </div>
                        <div class="item-subtitle">江苏省苏州市</div>
                        <div class="item-text">什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号什么路什么路什么号</div>
                      </div>
                    </a>
                  </li>
                </ul>
                <p style="margin:.75rem;"><a href="#" class="button button-fill">新增</a></p>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
<!--popup-->
<div class="popup popup-about">
  <div class="content-block" style="overflow: auto;height: 100%;">
    <div>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
      <p>订单详情</p>
    </div>


  </div>
  <div class="close-popup" style="position: absolute;top: 0;right:0;">取消</div>
</div>
<script>
  $(function(){
    $.get('/user/cart',function(res){
      var html='';
      console.log(res);
      for (var i in res){
        html += '<li class="swipeout" style="border-bottom: 1px solid #e7e7e7;"><div class="swipeout-content">' +
          '<div class="card product" style="margin: 0;"><div class="card-content"><div class="list-block media-list">' +
          '<div class="item-content"><div class="item-media">' +
          '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">' +
          '</div><div class="item-inner elip" style="border: none;"><div class="item-title-row">' +
          '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
          '<div class="item-subtitle elip">' + res[i].name + '</div></div></div></div></div>' +
          '<div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
          '<span>' + res[i].model + '</span><span style="color:#CC3300;">￥666</span></div></div></div>' +
          '<div class="swipeout-actions-right">' +
          '<a class="count"><i class="plus">+</i><input type="number" value="1" pattern="[0-9]*" /><i class="minus">-</i></a>' +
          '<a data-pid="' + res[i].id + '" class="into-cart">加入购物车</a>' +
          '</div></li>';
      }
      $('.product-list-container').html(html);
      $('.product-list-container .swipeout:eq(0)').css('border-top','1px solid #e7e7e7');

    });


    // 加载flag
//    var loading = false;
//    // 最多可加载的条目
//    var maxItems = maxItems;
//
//    // 每次加载添加多少条目
//    // var itemsPerLoad = itemsPerLoad;
//    if(maxItems > itemsPerLoad){
//      $('.infinite-scroll-bottom .list-container ul').after('<div class="infinite-scroll-preloader"><div class="preloader"></div></div>');
//    }
//    function addItems(itemsPerLoad, lastIndex) {
//      var j = (lastIndex < maxItems && itemsPerLoad <= maxItems - lastIndex) ? lastIndex + itemsPerLoad : maxItems;
//      console.log(j,"j");
//      // 生成新条目的HTML
//      var html = '';
//      for (var i = lastIndex + 1; i <= j; i++) {
//        html += '<li class="swipeout" style="border-bottom:1px solid #e7e7e7;"><div class="swipeout-content">' +
//          '<div class="card" style="margin: 0;border-radius:0;"><div class="card-content">' +
//          '<div class="list-block media-list"><div class="item-content"><div class="item-media">' +
//          '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>' +
//          '<div class="item-inner elip" style="border:none;"><div class="item-title-row">' +
//          '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
//          '<div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div></div></div></div></div>' +
//          '<div class="card-footer" style="border:none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
//          '<span>900G</span>' +
//          '<span style="color:#CC3300;font-size: .85rem;">￥66' + i + '</span></div></div></div>' +
//          '<div class="swipeout-actions-right">' +
//          (b ? '<a href="#" style="background: #f60;">加入购物车</a>': '<a href="#" style="background: #CC3300;">删除</a>')+
//          '</div></li>';
//      }
//      // 添加新条目
//      $('.infinite-scroll-bottom .list-container ul').append(html);
//      $('.infinite-scroll-preloader').css('opacity','0');
//    }
    //预先加载多少条
//    addItems(itemsPerLoad, 0);
//    $('.swipeout:eq(0)').css('border-top','1px solid #e7e7e7');

    // 上次加载的序号

//    var lastIndex = itemsPerLoad;

    // 注册'infinite'事件处理函数
//    $(document).on('infinite', '.infinite-scroll-bottom',function() {
//      $('.infinite-scroll-preloader').css('opacity','1');
//
//      // 如果正在加载，则退出
//      if (loading) return;
//
//      // 设置flag
//      loading = true;
//
//      // 模拟1s的加载过程
//      setTimeout(function() {
//        // 重置加载flag
//        loading = false;
//        var html = '';
//        for (var i in data) {
//          html += '<li class="swipeout" style="border-bottom:1px solid #e7e7e7;"><div class="swipeout-content">' +
//            '<div class="card" style="margin: 0;border-radius:0;"><div class="card-content">' +
//            '<div class="list-block media-list"><div class="item-content"><div class="item-media">' +
//            '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>' +
//            '<div class="item-inner elip" style="border:none;"><div class="item-title-row">' +
//            '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
//            '<div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div></div></div></div></div>' +
//            '<div class="card-footer" style="border:none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
//            '<span>900G</span>' +
//            '<span style="color:#CC3300;font-size: .85rem;">￥66' + i + '</span></div></div></div>' +
//            '<div class="swipeout-actions-right">' +
//            (b ? '<a href="#" style="background: #f60;">加入购物车</a>': '<a href="#" style="background: #CC3300;">删除</a>')+
//            '</div></li>';
//        }
//        // 添加新条目
//        $('.infinite-scroll-bottom .list-container ul').append(html);
////        if (lastIndex >= maxItems) {
////          // 加载完毕，则注销无限加载事件，以防不必要的加载
////          $.detachInfiniteScroll($('.infinite-scroll'));
////          // 删除加载提示符
////          $('.infinite-scroll-preloader').remove();
////          $.toast("没有更多商品");
////          return;
////        }
//
//        // 添加新条目
//        addItems(itemsPerLoad, lastIndex);
//        // 更新最后加载的序号
//        lastIndex = $('.list-container li.swipeout').length;
//        // console.log(lastIndex);
//        //容器发生改变,如果是js滚动，需要刷新滚动
////          $.refreshScroller();
//      }, 1000);
//    });

    //购物车点击
    $(document).on('click','.product',function(){
//      console.log($(this));
      window.location.href = 'detail';
    });
    //订单点击
    $(document).on('click','.order',function(){
      $(this).find('.card-detail').slideToggle();
    });

//    //选择商品
//    $('.choose-button').click(function(){
//      $(this).hide().siblings('.hidden-button').show();
//      $('.product').append('<a class="aaa">666</a>');
//    });
//    //取消
//    $('.cancel-button').click(function(){
//        $('.product').find('a').remove();
//        $('.hidden-button').hide();
//        $('.choose-button').show();
//    });

    //取消冒泡
    $(document).on('click','.card-footer .count',function(e){
      e.stopPropagation();
    });
    //点击选择商品
    $(document).on('click','.p-check',function(e){
      e.stopPropagation();
      $(this).find('.p-check-button').toggleClass('ok');
    });


    //输入数量
    $(document).on('change','.card-footer .amount',function(){
      $(this).val(function(){
        return $(this).val() == 0 ? 1 : Number($(this).val());
      });
      $(this).val() == 1 ? $('.minus').css('color','#bbb') : $('.minus').css('color','#5f646e');

    });

//    加减数字
    function count($this,isPlus,e){
      e.stopPropagation();
      var $thisVal = $this.siblings('input');
      var amount = Number($thisVal.val());
      if(!isPlus && amount == 1) return;
      if(Number.isInteger(amount) && amount >= 1){
        $thisVal.val(function(){
          return isPlus ? Number($thisVal.val()) + 1 : Number($thisVal.val()) - 1;
        });
        $thisVal.val() == 1 ? $('.minus').css('color','#bbb') : $('.minus').css('color','#5f646e');

      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    }
    $(document).on('click','.plus',function(e){
      count($(this),true,e);
    });
    $(document).on('click','.minus',function(e){
      count($(this),false,e);
    });

    //提交订单
    $(document).on('click','.open-about', function () {
      $.popup('.popup-about');
    });
//    $('.submit-button').click(function(){
//
//    });
    $("#city-picker").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
                            <button class="button button-link pull-right close-picker">确认</button>\
                            <h1 class="title">选择地区</h1>\
                          </header>'
    });
  });
</script>




